<template>
  <div id="goods">
    <div>
      <div style="width: 100%;margin-top: 30px;margin-bottom: 10px">
        <table style="width: 100%;border: 0px red;background-color: dodgerblue">
          <tr style="border: 0px">
            <td style="text-align: left;border: 0px;">
              <H3 style="color: white">商品列表页</H3>
              <H4 style="color: white">当前用户:${Logingood}</H4>
            </td>
            <td style="text-align: right;border:0px;vertical-align: bottom;">
              <form action="list" method="post" class="form-inline" style="margin-bottom: 0px">
                <H4 style="color: white;display: inline">按:</H4>
                <select class="form-control" name="conIndex" id="select1">
                  <option value="0">全部</option>
                  <option value="1">id号</option>
                  <option value="2">商品名称</option>
                  <option value="3">类别</option>
                </select>
                <input class="form-control" name="text_search" type="text" width="100%">&nbsp;
                <input type="submit" class="btn btn-warning" value="查找商品"/>
              </form>
            </td>
            <td style="text-align: right;border: 0px;vertical-align: bottom">
              <button id="button1" class="btn btn-info">添加商品</button>
              <button id="button2" class="btn btn-danger">删除选中商品</button>
            </td>
          </tr>
        </table>
      </div>
      <table class="table table-hover">
        <tr>
          <th>复选</th>
          <th>序号</th>
          <th>id号</th>
          <th>商品名称</th>
          <th>类型</th>
          <th>商品介绍</th>
          <th>价格</th>
          <th>图片</th>
          <th>库存</th>
          <th>操作项</th>
        </tr>
        <tr v-for="(good,index) in goods" v-bind:key="index">
          <td style="vertical-align: middle">{{ index }}</td>
          <td style="vertical-align: middle"><input type="checkbox" v-bind:value="good.id"></td>
          <td style="vertical-align: middle">{{ good.name }}}</td>
          <td style="vertical-align: middle">{{ good.type }}}</td>
          <td style="vertical-align: middle">{{ good.info }}</td>
          <td class="td1" style="vertical-align: middle">{{ good.price }}</td>
          <td class="td1" style="vertical-align: middle">
            <img v-bind:src="good.picture" alt="暂无图片" width="100px" height="100px">
          </td>
          <td style="vertical-align: middle">{{ good.count }}}</td>
          <td style="vertical-align: middle">{{ good.title }}</td>
          <td style="vertical-align: middle">
            <a v-bind:href="'/goods/deleteById?id='+ good.id">删除</a>
            <a v-bind:href="'/goods/selectById?id=' + good.id">修改</a>
          </td>
        </tr>
      </table>
    </div>
    <div style="width:90%;text-align: right">
      共计： <span id='spanPage1'>{{pageCount}}</span>页
      当前第：<span id='spanPage2'>{{pageNum}}</span>页
      <button id='b1' @click='UpPage' class="btn btn-info">上一页</button>
      <button id='b2' @click='NextPage' class="btn btn-info">下一页</button>
    </div>
  </div>

</template>
<script>
import axios from "axios"   //引入axios向后端发送异步请求
export default {
  name: "goodsView",
  data() {
    return {
      goods: [],//表格中要显示的数据，这是一个Json数组
      pageNum: 1, //当前页号
      pageSize: 3, //每页的记录数
      pageCount: 1 //总页数
    }
  },
  created() {
    const that = this
    // alert("设置弹窗")
    axios.get('/goods/listAll/' + this.pageNum + '/' + this.pageSize)
        // axios.get('http://localhost:8080/good/listAll'+'/'+this.pageNum+'/'+this.pageSize)
        .then(function (res) {
          console.log(res.data)
          that.goods = res.data  //将返回的数据给goods数组
          that.pageCount = res.data[res.data.length - 1].pageCount //取总页数，Json数组的最后一行是分页信息
        }).catch(function (res) {
      // eslint-disable-next-line no-undef
      console.log(res, data)
    })
  },
  methods: {
    NextPage() {
      const that = this
      if (this.pageNum === this.pageCount) {
        return //如果当前页号是最后一页，那么点击按钮直接返回
      } else {
        that.pageNum += 1 //当前页号加1
      }
      axios.get('/goods/listAll/' + this.pageNum + '/' + this.pageSize)
          // axios.get('http://localhost:8080/good/listAll'+'/'+this.pageNum+'/'+this.pageSize)
          .then(function (res) {
            console.log(res.data)
            that.goods = res.data  //将返回的数据给goods数组
            that.pageCount = res.data[res.data.length - 1].pageCount //取总页数，Json数组的最后一行是分页信息   取数组中最后一个元素的总页数
          }).catch(function (res) {
        // eslint-disable-next-line no-undef
        console.log(res, data)
      })
    },
    UpPage() {
      const that = this
      if (this.pageNum === 1) {
        return //如果当前页号是最后一页，那么点击按钮直接返回
      } else {
        that.pageNum -= 1 //当前页号减1
      }
      axios.get('/goods/listAll/' + this.pageNum + '/' + this.pageSize)
          // axios.get('http://localhost:8080/good/listAll'+'/'+this.pageNum+'/'+this.pageSize)
          .then(function (res) {
            console.log(res.data)
            that.goods = res.data  //将返回的数据给goods数组
            that.pageCount = res.data[res.data.length - 1].pageCount //取总页数，Json数组的最后一行是分页信息
          }).catch(function (res) {
        // eslint-disable-next-line no-undef
        console.log(res, data)
      })
    }
  }
}

</script>
<style scoped>
th, tr, td {
  border: 2px solid white;
}

a {
  color: black;
}
</style>
